import React from 'react';
import { getPost, getPostIds, getPosts } from 'lib/post';
import { Post } from 'interface/post'
import styles from 'styles/page.module.scss'
import Layout from 'components/layout/index'
import { NextPageWithLayout } from 'pages/_app';
import PageNav from 'components/page-nav';

const postShow: NextPageWithLayout<Post> = (props) => {

  const { title, date, htmlContent, prev, next } = props
  return (
    <>
      <div className={styles.container}>
        <h1 className={styles.title}>{title}</h1>
        <div className={styles.meta}>
          <span className={styles['date-prefix']}>发布于</span>
          <span className={styles.date}>{date}</span>
        </div>
        <div className='markdown-body' dangerouslySetInnerHTML={{ __html: htmlContent }}></div>
      </div>
      <PageNav prev={prev} next={next} />
    </>
  );
};

postShow.getLayout = Layout

export default postShow;

export const getStaticPaths = async () => {
  const idList = await getPostIds()
  return {
    paths: idList.map((id: string) => ({ params: { id } })),
    fallback: true
  };
};

export const getStaticProps = async (context: any) => {
  const params = context.params;


  const post = await getPost(params.id)
  return {
    props: post || null
  };
};